import React from 'react';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import zhCN from 'antd/es/locale/zh_CN';
import { privateRoutes } from '../config/routes';
import { logout } from '../services/auth';

/**
 * 基础布局组件
 * @param {Object} props
 * @param {React.ReactNode} props.children - 子组件
 * @param {Object} props.currentUser - 当前用户信息
 * @returns {React.ReactNode}
 */
const BasicLayout = ({ children, currentUser }) => {
  // 处理登出
  const handleLogout = async () => {
    try {
      await logout();
    } catch (error) {
      console.error('登出失败:', error);
      // 清除localStorage中的用户信息和token
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');
      window.location.href = '/login';
    }
  };

  // 根据用户角色生成动态菜单
  const generateMenuData = () => {
    if (!currentUser) return [];
    
    // 过滤菜单，只有管理员可以看到用户管理
    return privateRoutes
      .filter(item => !item.hidden)
      .filter(item => {
        // 如果是用户管理菜单，只有管理员角色可以看到
        if (item.access === 'user:manage') {
          return currentUser?.roles?.includes('admin') || false;
        }
        // 其他菜单所有登录用户都可以看到
        return true;
      })
      .map(item => ({
        path: item.path,
        name: item.name,
        key: item.path,
        icon: item.icon,
      }));
  };

  return (
    <ProLayout
      locale={zhCN}
      menuDataRender={generateMenuData}
      layout="side"
      title="API管理平台"
      logout={handleLogout}
      avatarProps={
        {
          src: currentUser?.avatar || 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
          title: currentUser?.nickname || currentUser?.username,
        }
      }
    >
      <PageContainer>
        {children}
      </PageContainer>
    </ProLayout>
  );
};

export default BasicLayout;